<template>
    <div class="pc-box">
        <div class="prices l-f l-row-sb">
        <div class="prices_item">
            <p class="prices_item_label">{{$t('option.open')}}</p>
            <p class="prices_item_value">{{ currentSelect.open }}</p>
        </div>
        <div class="prices_item">
            <p class="prices_item_label">{{$t('option.high')}}</p>
            <p class="prices_item_value">{{ currentSelect.high }}</p>
        </div>
        <div class="prices_item">
            <p class="prices_item_label">{{$t('option.low')}}</p>
            <p class="prices_item_value">{{ currentSelect.low }}</p>
        </div>
        <div class="prices_item">
            <p class="prices_item_label">{{$t('option.close')}}</p>
            <p class="prices_item_value">{{ currentSelect.close }}</p>
        </div>
    </div>
    </div>
    <div class="times l-f l-row-sb">
        <div 
        @click="onSelectTime(index)"
        class="times_item" 
        :class="currentTime === index ? 'times_item-active' : ''"
        v-for="(item,index) in timeList" 
        :key="index">{{item.label}}</div>
    </div>
    <div class="eChart">
        <Line ref="lineRef" @change="onChange" />
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { numberFormat } from '@/utils/index.js'
import { COIN } from '@/common/index.js'
import { useMainStore } from '@/store'

import { getCoinHistoryListApi } from '@/api/coinApi'

import Line from './components/line/index.vue'

const mainStore = useMainStore()

const lineRef = ref(null)

const historyListData = ref([])

const currentSelect = reactive({
    open: 0,
    close: 0,
    low: 0,
    high: 0
})

const currentTime = ref(0)
const timeList = reactive([
    {
        label: '1M',
        value: '1min'
    },
    {
        label: '5M',
        value: '5min'
    },{
        label: '15M',
        value: '15min'
    },
    {
        label: '30M',
        value: '30min'
    },
    {
        label: '1H',
        value: '60min'
    },
    {
        label: '1W',
        value: '1week'
    },
    {
        label: '1MON',
        value: '1mon'
    }
])

watch(
  () => mainStore.klineMarket,
  (val) => {
    if(val.period === timeList[currentTime.value].value) {
       currentSelect.open = val.open
       currentSelect.close = val.close
       currentSelect.high = val.high
       currentSelect.low = val.low
       if(historyListData.value.length > 0 && val.time > historyListData.value[historyListData.value.length - 1].id) {
        historyListData.value.push({
            close: val.close,
            high: val.high,
            id: val.time,
            low: val.low,
            open: val.open
        })
        lineRef.value.setOption(historyListData.value,timeList[currentTime.value].value)
       }
    }
  }
)

const onSelectTime = (index) => {
    currentTime.value = index
    getHistoryList()
}
onMounted(() => {
    getHistoryList()
})

const onChange = (e) => {
    currentSelect.open = e.open
    currentSelect.close = e.close
    currentSelect.low = e.low
    currentSelect.high = e.high
}

const getHistoryList = async () => {
    const res = await getCoinHistoryListApi({
        coin: COIN.name + '-USDT',
        period: timeList[currentTime.value].value,
        size: 100
    })
    for(let i = 0; i < res.length; i++) {
        res[i].id = res[i].id * 1000
        res[i].open = numberFormat(res[i].open,4)
        res[i].close = numberFormat(res[i].close,4)
        res[i].low = numberFormat(res[i].low,4)
        res[i].high = numberFormat(res[i].high,4)
    }
    let data = res.sort((a, b) => a.id - b.id)
    onChange(data[data.length - 1]) // 默认显示最后的数据
    historyListData.value = data
    mainStore.setDayMarket(data[data.length - 1])
    lineRef.value.setOption(historyListData.value,timeList[currentTime.value].value)
}

</script>

<style lang="scss" scoped>
.prices {
    &_item {
        &_label {
            font-size: 14px;
            color: #ffffff;
            opacity: .5;
            font-weight: 400;
        }
        &_value {
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            opacity: .8;
        }
    }
}
.times {
    background: #d9d9d90d;
    border-radius: 10px;
    height: 50px;
    padding: 0 30px;
    box-sizing: border-box;
    margin-top: 20px;
    overflow-x: auto;
    &_item {
        font-size: 10px;
        font-weight: 400;
        color: #ffffff;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
    }
    &_item-active {
        background-color: #2c2c33;
    }
}
.eChart {
    margin-top: 20px;
    height: 300px;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 5px;
    background-color: #070628;
}
@media only screen and (max-width: 1200px) {
    .times {
        background-color: transparent;
        padding: 0;
        margin-top: 0;
    }
    .eChart {
        margin-top: 0px;
    }
     ::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 0;
        background-color: #070628;
    }
}
</style>